.dx-size-default() {
    @GENERIC_TAGBOX_TAG_CONTAINER_PADDING_BOTTOM: 4px;
    @GENERIC_TAGBOX_TAG_CONTENT_MARGIN: 4px 0 0 4px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT: 6px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT: 25px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING: 3px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT 4px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT;
    @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT: 5px;
    @GENERIC_TAGBOX_REMOVE_BUTTON_WIDTH: 25px;
    @GENERIC_TAGBOX_INPUT_MARGIN_LEFT: 5px;
    @GENERIC_TAGBOX_SELECT_ALL_PADDING_BOTTOM: 12px;
    @GENERIC_TAGBOX_SELECT_ALL_MARGIN_BOTTOM: 3px;
}
.dx-size-compact() {
    @GENERIC_TAGBOX_TAG_CONTAINER_PADDING_BOTTOM: 2px;
    @GENERIC_TAGBOX_TAG_CONTENT_MARGIN: 2px 0 0 2px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT: 4px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT: 17px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING: 2px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT 2px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT;
    @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT: 3px;
    @GENERIC_TAGBOX_REMOVE_BUTTON_WIDTH: 17px;
    @GENERIC_TAGBOX_INPUT_MARGIN_LEFT: 3px;
    @GENERIC_TAGBOX_SELECT_ALL_PADDING_BOTTOM: 7px;
    @GENERIC_TAGBOX_SELECT_ALL_MARGIN_BOTTOM: 1px;
}

.dx-tagbox:not(.dx-texteditor-empty) {
    .dx-texteditor-input {
        padding-left: 0;
        margin-left: @GENERIC_TAGBOX_INPUT_MARGIN_LEFT;

        .dx-rtl &,
        .dx-rtl& {
            padding-right: 0;
            padding-left: 0;
            margin-right: 0;
            margin-left: 0;
        }
    }
}

.dx-dropdowneditor-button-visible .dx-tag-container {
    padding-right: @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
}

.dx-show-clear-button {
    .dx-tag-container {
        padding-right: @GENERIC_DROPDOWNEDITOR_CLEAR_ICON_CONTAINER_SIZE;
    }

    &.dx-dropdowneditor-button-visible .dx-tag-container {
        padding-right: @GENERIC_DROPDOWNEDITOR_CLEAR_ICON_CONTAINER_SIZE + @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
    }
}

.dx-tagbox-single-line {
    &.dx-dropdowneditor-button-visible {
        .dx-texteditor-container {
            width: calc(~"100% - "@GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE);
        }
    }

    .dx-tag-container {
        padding-right: 0;
    }
}

.dx-tag-content {
    margin: @GENERIC_TAGBOX_TAG_CONTENT_MARGIN;
    padding: @GENERIC_TAGBOX_TAG_CONTENT_PADDING;
    min-width: 40px;
    background-color: @tagbox-tag-bg;
    border-radius: @tagbox-tag-border-radius;
    color: @tagbox-tag-color;
}

.dx-tag-remove-button {
    width: @GENERIC_TAGBOX_REMOVE_BUTTON_WIDTH;
    height: 100%;

    &:before, &:after {
        right: 4px + @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        margin-top: -5px;
        width: 3px;
        height: 11px;
        background: @tagbox-tag-button-remove-bg;
    }

    &:after {
        right: @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        margin-top: -1px;
        width: 11px;
        height: 3px;
    }

    &:active {
        &:before, &:after {
            background: @tagbox-tag-button-remove-active-bg;
        }
    }
}

.dx-tag.dx-state-focused {
    .dx-tag-content {
        background-color: @tagbox-tag-focused-bg;
        color: @tagbox-tag-focused-color;
    }

    .dx-tag-remove-button {
        &:before, &:after {
            background-color: @tagbox-tag-focused-button-remove-bg;
        }

        &:active {
            &:before, &:after {
                background: @tagbox-tag-button-remove-active-bg;
            }
        }
    }
}

.dx-tagbox.dx-invalid {
    .dx-texteditor-container {

        &:after {
            right: @GENERIC_INVALID_BADGE_HORIZONTAL_PADDING;

            .dx-rtl &,
            .dx-rtl& {
                left: @GENERIC_INVALID_BADGE_HORIZONTAL_PADDING;
            }
        }
    }
}

.dx-tagbox-popup-wrapper {
    .dx-list-select-all {
        border-bottom: 1px solid @tagbox-select-all-border-color;
        padding-bottom: @GENERIC_TAGBOX_SELECT_ALL_PADDING_BOTTOM;
        margin-bottom: @GENERIC_TAGBOX_SELECT_ALL_MARGIN_BOTTOM;
    }
}

.dx-rtl {
    .dx-tag-content {
        padding-right: @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT;
        padding-left: @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT;
    }

    .dx-tag-remove-button {
        &:before {
            right: auto;
            left: 4px + @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        }

        &:after {
            right: auto;
            left: @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        }
    }

    &.dx-dropdowneditor-button-visible .dx-tag-container {
        padding-right: 0;
        padding-left: @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
    }

    &.dx-show-clear-button {
        .dx-tag-container {
            padding-right: 0;
            padding-left: @GENERIC_DROPDOWNEDITOR_CLEAR_ICON_CONTAINER_SIZE;
        }

        &.dx-dropdowneditor-button-visible .dx-tag-container {
            padding-right: 0;
            padding-left: @GENERIC_DROPDOWNEDITOR_CLEAR_ICON_CONTAINER_SIZE + @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
        }
    }
}
